<template>
	<div class="add-shelves-goods">
		<div class="goods-top-menu">
			<div class="goods-menu-left">
				<div class="all-check">
					<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
				</div>
				<div class="client-view">
					<el-select v-model="style_id" placeholder="风格分类" @change="selectType">
						<el-option v-for="item in styleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
					</el-select>
				</div>

				<div class="client-view">
					<el-select v-model="class_id" placeholder="品类" @change="selectType">
						<el-option v-for="item in classList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
					</el-select>
				</div>

				<div class="client-view">
					<el-select v-model="order_by" placeholder="排序" @change="selectType">
						<el-option v-for="(item, index) in orderByList" :key="index" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</div>

				<div class="client-view">
					<el-select v-model="asc" placeholder="排序" @change="selectType">
						<el-option v-for="(item, index) in ascList" :key="index" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</div>
			</div>

			<div class="goods-menu-right">
				<refresh-button @refresh="refreshPage"></refresh-button>
				<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
			</div>
		</div>
		<div class="goods-list">
			<div class="goods-item" v-for="(item, index) in goodsList" :key="index">
				<div class="goods-checkbox">
					<el-checkbox v-model="item.checkbox"></el-checkbox>
				</div>
				<div class="goods-content" @click="checkboxClick(item)">
					<ImgPopover style="margin-top: 5px;" :src="item.image_middle"></ImgPopover>
					<div class="text-info">
						<el-tooltip placement="top" effect="light" :content="item.goods_name">
							<p class="goods-name">{{ item.goods_name }}</p>
						</el-tooltip>
						<el-tooltip placement="top" effect="light" :content="item.goods_sn">
							<p class="goods-sn">商品编号：{{ item.goods_sn }}</p>
						</el-tooltip>
						<p class="add-time">上架时间：{{ item.add_time }}</p>
						<div class="text-bottom">
							<p style="color: red;">¥{{ item.retail_price }}</p>
							<p style="color: #ef8200;">人气：{{ item.click }}</p>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div class="pages">
			<el-pagination background layout="prev, pager, next, jumper" :page-size="50" :total="total" @current-change="init"
			 :current-page="page"></el-pagination>
		</div>
		<div style="padding: 20px 10px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick">确 定</el-button>
		</div>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			ImgPopover
		},
		props: {
			layerid: {
				type: String,
				default: ''
			},
			goods_type: {
				type: Number,
				default: 0
			},
			vr_id: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				asc: 2,
				ascList: [{
						value: 1,
						name: '升序'
					},
					{
						value: 2,
						name: '降序'
					}
				],
				order_by: 'add_time',
				orderByList: [{
						value: 'add_time',
						name: '时间排序'
					},
					{
						value: 'click',
						name: '人气排序'
					},
					{
						value: 'retail_price',
						name: '价格排序'
					},
					{
						value: 'weight',
						name: '销量排序'
					}
				],
				checkAll: false,
				total: 0,
				page: 0,
				classSelect: 0, // 分类搜索
				selectContent: '', // 搜索输入框的值
				searchOption: [{
					value: 0,
					label: '型号'
				}, {
					value: 1,
					label: '商品ID'
				}, {
					value: 2,
					label: '商品名'
				}],
				styleList: [],
				classList: [],
				style_id: '',
				class_id: '',
				goodsList: []
			};
		},
		methods: {
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 50,
					is_sale: 1,
					is_goods: 1,
					store_id: 1,
					style_id: this.style_id,
					class_id: this.class_id,
					order_by: this.order_by,
					asc: this.asc
				};

				if (this.style_id == 0) {
					delete data.style_id;
				}
				if (this.class_id == 0) {
					delete data.class_id;
				}

				if (this.classSelect == 0) {
					data.keyword = this.selectContent;
				} else if (this.classSelect == 1) {
					data.goods_id = this.selectContent;
				} else if (this.classSelect == 2) {
					data.keyword = this.selectContent;
				}

				this.$http(this.$ApiList.GoodsList, data).then(res => {
					this.goodsList = [];
					res.datas.data.forEach(item => {
						item.checkbox = false;
						this.goodsList.push(item);
					});
					this.total = res.datas.count;
				});
			},
			addFabricClick() {
				let goodsList = [];
				this.goodsList.forEach(item => {
					if (item.checkbox) {
						goodsList.push(item.goods_id);
					}
				});
				if (goodsList.length == 0) {
					this.$layer.msg('至少选择一件商品');
					return;
				}

				let data = {
					vr_id: this.vr_id,
					goods_type: this.goods_type,
					goods_ids: goodsList.join(',')
				}

				this.$http(this.$ApiList.VrGoodsAdd, data).then(res => {
					this.$layer.msg(res.datas);
					this.init();
					this.checkAll = false;
					this.$parent.init();
				});
			},
			checkboxClick(item) {
				console.log(1);
				if (item.checkbox) {
					item.checkbox = false;
				} else {
					item.checkbox = true;
				}
			},
			refreshPage() {
				this.checkAll = false;
				this.page = 1;
				this.style_id = '';
				this.selectContent = '';
				this.classSelect = '';
				this.class_id = '';
				this.init();
			},
			selectType() {
				this.init();
			},
			getClassify() {
				// 风格
				this.$http(this.$ApiList.StyleList).then(res => {
					this.styleList = res.datas;
				});
				// 品类
				this.$http(this.$ApiList.ClassList).then(res => {
					this.classList = res.datas.reverse();
				});
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			cancel() {
				this.$layer.close(this.layerid);
			},
			handleCheckAllChange() {
				if (this.checkAll) {
					this.goodsList.forEach(item => {
						item.checkbox = true;
					});
				} else {
					this.goodsList.forEach(item => {
						item.checkbox = false;
					});
				}
			}
		},
		created() {
			this.init();
			this.getClassify();
		}
	};
</script>
<style lang="scss">
	.add-shelves-goods {
		padding: 20px 20px;

		.goods-top-menu {
			display: flex;

			.goods-menu-left {
				flex: 1;
				display: flex;
			}

			.goods-menu-right {
				flex: 2;
				display: flex;
				display: flex;
				flex-direction: row-reverse;
			}

			.all-check {
				margin-right: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.client-view {
				margin-right: 10px;
				width: 120px;
			}
		}

		.pages {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.goods-list {
			padding: 10px 0;
			display: flex;
			flex-wrap: wrap;

			.goods-checkbox {
				width: 16px;
				margin-right: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}

			.goods-item {
				padding: 15px 10px;
				margin-top: 10px;
				margin-right: 10px;
				display: flex;
				width: 370px;
				height: 140px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				border-radius: 4px;
				cursor: pointer;
				box-sizing: border-box;

				.goods-content {
					display: flex;

					.img-popover img {
						width: 100px !important;
						height: 100px !important;
					}
				}
			}
		}

		.text-info {
			width: 210px;
			margin-left: 10px;

			.goods-name,
			.goods-sn {
				line-height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.add-time {
				line-height: 30px;
			}
		}

		.text-bottom {
			display: flex;
			line-height: 30px;
		}

		.text-bottom p {
			flex: 1;
		}
	}
</style>
